<template>
  <div class="box">
    <van-sticky>
      <van-nav-bar
        title="设置"
        left-text=""
        left-arrow
        class="top"
        @click-left="prev"
      >
      </van-nav-bar>
    </van-sticky>
    <div class="one">
      <div class="user">
        <img :src="img" alt="" />
        <div class="user-details">
          <span>{{ name }}</span>
          <p>{{ ID }}</p>
        </div>
        <van-cell title="" is-link value="" />
      </div>
      <van-cell title="密保手机" is-link :value="tel" />
      <van-cell title="收货地址" is-link value="" />
    </div>
    <div class="two">
      <van-cell title="消息推送" is-link value="已开启" />
      <van-cell title="权限管理" is-link value="" />
      <van-cell title="小米商城隐式政策" is-link value="" />
    </div>
    <div class="three">
      <van-cell title="关于商城" is-link value="" />
      <van-cell title="意见反馈" is-link value="" />
      <van-cell title="协议规则" is-link value="" />
      <van-cell title="资质证照" is-link value="" />
      <van-cell title="小米商城用户协议" is-link value="" />
      <van-cell title="小米账号用户协议" is-link value="" />
      <van-cell title="小米账号隐私政策" is-link value="" />
    </div>
    <div class="secede" @click="showPopup">退出账号</div>
    <van-action-sheet v-model="show" :round="false" title="退出账号">
      <div class="content">
        <div class="left" @click="back">取消</div>
        <router-link to="/mine">
          <div class="right" @click="cancel">退出</div>
        </router-link>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";
import axios from "axios";
Vue.use(Cell);
Vue.use(CellGroup);

export default {
  name: "install",
  data() {
    return {
      show: false,
      reveal: true,
      name: this.name,
      ID: this.ID,
      tel: this.tel,
      img: "/img/touxiang.jpg",
      // round:true
    };
  },
  methods: {
    showPopup() {
      this.show = true;
      // this.round = false;
    },
    back() {
      this.show = false;
    },
    cancel() {
      this.reveal = false;
      this.show = false;
      localStorage.removeItem("tel")
    },
    prev() {
      this.$router.back();
      //   this.$router.push("/mine");
      //    this.$route.params.pathMatch // 'mine'
    },
  },
  created() {
    axios({
      url: "http://localhost:3000/user?tel=" + localStorage.getItem("tel"),
      method: "get",
      params: {
        type: this.type,
      },
    }).then((res) => {
      this.name = res.data[0].username;
      this.ID = res.data[0].ID;
      this.tel = res.data[0].tel;
      this.img = res.data[0].img;
    });
  },
};
</script>

<style scoped>
/* @import url(../assets/xiaomi-iconfont/iconfont.css); */
.box {
  padding-bottom: 0.28rem;
}
.top {
  border-bottom: 1px solid #e7e7e7;
}
.two {
  margin-top: 0.11rem;
}
.three {
  margin-top: 0.11rem;
}
.secede {
  margin-top: 0.11rem;
  height: 0.49rem;
  line-height: 0.49rem;
  text-align: center;
  background: #fff;
  font-size: 0.14rem;
}
.content {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.24rem;
}
.content div {
  width: 1.67rem;
  height: 0.38rem;
  line-height: 0.38rem;
  text-align: center;
  border: 1px solid #dbdbdb;
  font-size: 0.14rem;
}
.content .left {
  border-radius: 0.19rem 0 0 0.19rem;
}
.content .right {
  border-radius: 0 0.19rem 0.19rem 0;
  color: #dc681e;
}
.user {
  height: 0.86rem;
  padding: 0 0 0 0.2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
}
.user img {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  margin-right: 0.14rem;
}
.user .user-details span {
  font-size: 0.16rem;
}
.user .user-details {
  width: 2.5rem;
  height: 0.48rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-right: 20px;
}

.user .user-details p {
  height: 0.16rem;
  border-radius: 0.16rem;
  font-size: 0.1rem;
  color: #868686;
}
.user .right {
  font-size: 0.25rem;
  font-stretch: condensed;
  color: #6c6c6c;
}
</style>
